<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="注册"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script type="application/javascript">
        layui.use('element',function () {
            var element = layui.element;
        });

        function login() {
            var oauthsId = $("#oauthsId").val();
            var oauthsType = $("#oauthsType").val();
            window.location.href="/login?oauthsId="+oauthsId+"&oauthsType="+oauthsType;
        }

        function getByteLen(val) {
            var len = 0;
            for (var i = 0; i < val.length; i++) {
                var a = val.charAt(i);
                if (a.match(/[^\x00-\xff]/ig) != null) {
                    len += 2;
                }
                else {
                    len += 1;
                }
            }
            return len;
        }

        function checkNickName() {
            var check = false;
            var nickName = $("#nickName").val();
            var regExp = /^[\u4e00-\u9fa5 a-zA-Z0-9]{3,16}$/;
            if(nickName == null || nickName == ""){
                $("#nickName").next().html("请告诉我你的昵称吧");
                check = false;
            }else if(getByteLen(nickName)<6){
                $("#nickName").next().html("昵称不能小于6个字符");
                check = false;
            }else if(getByteLen(nickName)>16){
                $("#nickName").next().html("昵称不能大于16个字符");
                check = false;
            }else if(regExp.test(nickName) == false){
                $("#nickName").next().html("昵称不能包含特殊字符,可以是字母，数字和汉字");
                check = false;
            }else{
                $("#nickName").next().html("");
                check = true;
            }
            return check;
        }

        function checkPassword() {
            var check = false;
            var password = $("#password").val();
            var regExp=/^(\w){6,16}$/;
            if(password == null || password == ""){
                $("#password").next().html("请输入密码");
                check = false;
            }else if(password.length<6){
                $("#password").next().html("密码不能小于6个字符");
                check = false;
            }else if(password.length>16){
                $("#password").next().html("密码不能大于16个字符");
                check = false;
            }else if(regExp.test(password) == false){
                $("#password").next().html("密码不能包含特殊字符,可以是字母，数字和下划线");
                check = false;
            }else{
                $("#password").next().html("");
                check = true;
            }
            return check;
        }

        function checkPhone() {
            var check = false;
            var phone = $("#phone").val();
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if(phone == null || phone == ""){
                $("#phone").next().html("请输入手机号");
                check = false;
            }else if(regExp.test(phone) == false){
                $("#phone").next().html("请输入正确的手机号");
                check = false;
            }else{
                $("#phone").next().html("");
                check = true;
            }
            return check;
        }

/*        function checkCode() {
            var check = false;
            var code = $("#code").val();
            if(code == null || code == ""){
                $("#code").parent().next().html("请输入验证码");
                check = false;
            }else if(code.length !=6){
                $("#code").parent().next().html("请输入正确的验证码");
                check = false;
            }else{
                $("#code").parent().next().html("");
                check = true;
            }
            return check;
        }*/


        var countdown=60;
        function getCode(value) {
            var obj = $("#el-code-button");
            var span = obj.children();
            var phone = $("#phone").val();
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if(phone == null || phone == ""){
                $("#phone").next().html("请输入手机号");
            }else if(regExp.test(phone) == false){
                $("#phone").next().html("请输入正确的手机号");
            }else{
                var captcha1 = new TencentCaptcha('2077491291', function(res) {
                    if(res.ret == 0){
                        $.ajax({
                            type:"post",
                            url:"/checkCaptcha",
                            contentType:"application/json",
                            data:JSON.stringify({
                                "ticket":res.ticket,
                                "randstr":res.randstr
                            }),
                            success:function (result) {
                                if(result.code == 200) {
                                    $.ajax({
                                        type:"post",
                                        url:"/getCode/"+value,
                                        contentType:"application/json",
                                        data: phone,
                                        success:function (result) {
                                            if(result.code == 200){
                                                settime(obj,span);
                                            }else{
                                                $("#phone").next().html(result.message);
                                            }
                                        },
                                        dataType:"json"
                                    });
                                }
                            },
                            dataType:"json"
                        });
                    }
                });
                captcha1.show(); // 显示验证码
            }

        }

/*        function settime(obj,span) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled',false);
                span.html("获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr('disabled',true);
                span.html("" + countdown + "s后重新获取");
                countdown--;
            }
            setTimeout(function(){
                settime(obj,span);
            },1000)
        }*/

        function check() {
            var check = checkNickName() && checkPassword() && checkPhone() /*&& checkCode()*/;
            var nickName = $("#nickName").val();
            var password = $("#password").val();
            var phone = $("#phone").val();
            var code = $("#code").val();
            var oauthsId = $("#oauthsId").val();
            var oauthsType = $("#oauthsType").val();
            if(check == true){
                $.ajax({
                    type:"post",
                    url:"/registerUser",
                    contentType:"application/json",
                    data:JSON.stringify({
                        "nickName":nickName,
                        "password":password,
                        "phone":phone,
                        "code":code,
                        "oauthsId":oauthsId,
                        "oauthsType":oauthsType
                    }),
                    success:function (result) {
                        if(result.code == 200){
                            window.location.href="/success?info=注册成功";
                        }else{
                            if(result.code == 2010){
                                $("#nickName").next().html(result.message);
                            }else if(result.code == 2013){
                                $("#phone").next().html(result.message);
                            }else{
                                $("#code").parent().next().html(result.message);
                            }
                        }
                    },
                    dataType:"json"
                });
            }
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-container tree-marginTop" style="background: white">
    <div class="layui-row">
        <div class="register-main">
            <div class="title-line">
                <span class="tit">注册</span>
            </div>
            <div class="register-container">
                <form action="/registerUser" id="registerForm" method="post">
                    <div class="form-group">
                        <p class="error-message" th:text="${oauthsInfo}"></p>
                        <input type="text" class="el-input" id="nickName" name="nickName" placeholder="昵称" autocomplete="off" onkeyup="checkNickName()">
                        <p class="error-message"></p>
                    </div>
                    <div class="form-group">
                        <input type="password" class="el-input" id="password" name="password" placeholder="密码（6-16个字符组成，区分大小写）" autocomplete="off" onkeyup="checkPassword()">
                        <p class="error-message"></p>
                    </div>
                    <div class="form-group">
                        <input type="text" class="el-input" id="phone" name="phone" placeholder="填写常用手机号" autocomplete="off" onkeyup="checkPhone()">
                        <p class="error-message"></p>
                    </div>
<!--                    <div class="form-group">
                        <div class="el-code">
                            <input type="text" class="el-input" id="code" name="code" placeholder="请输入短信验证码" autocomplete="off" onkeyup="checkCode()">
                            <button type="button" class="btn-login el-code-button" onclick="getCode(1)" id="el-code-button"><span>点击获取</span></button>
                        </div>
                        <p class="error-message"></p>
                    </div>-->
                    <div class="form-group ">
                        <button type="button" class="el-button--primary" onclick="check()"><span th:text="${useroauths.type==null?'注册':'授权并绑定'}"></span></button>
                    </div>
                    <div class="form-group register-text-right">
                        <a href="javascript:login()" th:text="${useroauths.type==null?'已有账号，直接登录':'已有账号，绑定并登录'}"></a>
                    </div>
                </form>
                <input type="hidden" id="oauthsId" th:value="${useroauths.accountId}">
                <input type="hidden" id="oauthsType" th:value="${useroauths.type}">
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>